<template>
	<div class="home-wrapper">
		<!-- Banner图 -->
    <div id="app">
      <el-container>

<!--        <el-header style="text-align: right; font-size: 12px">-->
<!--          <el-image style="height:50px;image:left " :src="src"></el-image>-->

<!--          <el-dropdown>-->
<!--            <i class="el-icon-setting" style="margin-right: 15px"></i>-->
<!--            <el-dropdown-menu slot="dropdown">-->
<!--              <el-dropdown-item>查看</el-dropdown-item>-->
<!--              <el-dropdown-item>删除</el-dropdown-item>-->
<!--            </el-dropdown-menu>-->
<!--          </el-dropdown>-->
<!--          <span>设置</span>-->
<!--        </el-header>-->


        <el-container style=" margin-top:20px; height: 800px; border: 1px solid #eee">
          <el-aside width="380px" style="background-color: rgb(238, 241, 246)">
            <el-form style="margin-top: 20px" ref="form" :model="form" label-width="80px">
              <el-form-item label="数据类型">
                <el-select v-model="form.product_type" placeholder="请选择类型">
                  <el-option value="S2MSI2A">S2MSI2A</el-option>
                  <el-option value="S2MSI1C">S2MSI1C</el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="地区选择">
                <el-select v-model="form.region" placeholder="请选择地区">
                  <el-option value="郑州市">郑州市</el-option>
                  <el-option value="开封市">开封市</el-option>
                  <el-option value="洛阳市">洛阳市</el-option>
                  <el-option value="平顶山市">平顶山市</el-option>
                  <el-option value="安阳市">安阳市</el-option>
                  <el-option value="鹤壁市">鹤壁市</el-option>
                  <el-option value="新乡市">新乡市</el-option>
                  <el-option value="焦作市">焦作市</el-option>
                  <el-option value="濮阳市">濮阳市</el-option>
                  <el-option value="许昌市">许昌市</el-option>
                  <el-option value="漯河市">漯河市</el-option>
                  <el-option value="三门峡市">三门峡市</el-option>
                  <el-option value="南阳市">南阳市</el-option>
                  <el-option value="商丘市">商丘市</el-option>
                  <el-option value="信阳市">信阳市</el-option>
                  <el-option value="周口市">周口市</el-option>
                  <el-option value="驻马店市">驻马店市</el-option>
                  <el-option value="济源市">济源市</el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="开始时间">
                <el-col :span="20">
                  <el-date-picker type="date" placeholder="选择日期" v-model="form.start_date" style="width: 75%;"></el-date-picker>
                </el-col>
              </el-form-item>
              <el-form-item label="结束时间">
                <el-col :span="20">
                  <el-date-picker type="date" placeholder="选择日期" v-model="form.end_date" style="width: 75%;"></el-date-picker>
                </el-col>
              </el-form-item>

              <el-form-item label="云量">
                <el-col :span="5"><el-input v-model="form.scloud_cover" style="width: 75%;"></el-input></el-col>
                <el-col class="line" :span="2">%-</el-col>
                <el-col :span="5"><el-input v-model="form.ecloud_cover" style="width: 75%;margin-top: 10px" ></el-input></el-col>
                <el-col class="line" :span="2">%</el-col>

              </el-form-item>


              <el-form-item>
                <el-button type="primary" @click="submit">查询</el-button>
                <el-button type="success" @click="alldown">全部下载</el-button>
                <el-button>重置</el-button>
              </el-form-item>
            </el-form>
          </el-aside>



          <el-main>
            <el-table  v-loading="loading" :data="
            tableData.slice(
              (currentPage - 1) * pagesize,
              currentPage * pagesize
            )
          " style="width: 100%"
                      height="725">
              <el-table-column prop="beginposition" label="日期" width="120" :formatter="dateFormat" >
              </el-table-column>
              <el-table-column prop="filename" label="文件名" width="300">
              </el-table-column>
              <el-table-column prop="cloudcoverpercentage" label="云盖" width="60" :formatter="rounding" >
              </el-table-column>
              <el-table-column prop="size" label="文件大小" width="140">
              </el-table-column>
              <el-table-column prop="down" label="操作" width="120">
                <template slot-scope="scope">
                <el-button type="primary" @click="download(scope.row, scope.$index)" >
                  {{ scope.row.down }}
                </el-button>
                </template>
              </el-table-column>
              <el-table-column visible="true" prop="progress" label="进度" width="180">
                <template slot-scope="scope">
                  <el-progress
                      type="line"
                      :stroke-width="10"
                      :percentage="scope.row.progress"
                  ></el-progress>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
                layout="  prev, pager, next, sizes, jumper"
                :page-sizes="[8, 10,15]"
                :page-size="pagesize"
                :total="tableData.length"
                :pager-count="5"
                :current-page="currentPage"
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
            >
            </el-pagination>
          </el-main>
        </el-container>
      </el-container>

    </div>

	</div>
</template>

<script>


import { region , file ,size } from '_r/down.js'
import {allfile} from "@/request/down";
export default {
	name: 'Download',
	components: {

	},
  data() {
    return {
      src:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      form: {
        scloud_cover:'',
        ecloud_cover:'',
        url: '',
        product_type:'',
        name: '',
        region: '',
        start_date: '',
        end_date: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
      },
      tableData: [],
      currentPage: 1, //展示第几页
      pagesize: 8, //每页的数据条数
      loading: false
    }
  },methods: {
    download(row,indexs){
      row.down="正在下载"
      this.tableData[indexs].down="正在下载"

      //模拟进度条
      var obj1= setInterval(() => {
          row.progress=(parseFloat(row.progress)+0.02).toFixed(2)
          this.tableData[indexs].progress=row.progress
          this.$set(this.tableData, indexs, row);
        }, 1800);
      var obj= setInterval(() => {
        size(products,true)
            .then((res1) => {
              //填写进度
              var data=res1
              row.progress=parseFloat(data).toFixed(2)
              this.tableData[indexs].progress=row.progress
              this.$set(this.tableData, indexs, row);
              if(parseFloat(data)>=98){
                //完成时消除定时器
                clearInterval(obj)
                clearInterval(obj1)
                row.progress=100
                this.tableData[indexs].progress=row.progress
                this.$set(this.tableData, indexs, row);
                row.down="下载完成"
                this.tableData[indexs].down="下载完成"
                this.$set(this.tableData, indexs, row);
              }
            }).catch(() => {
          this.loginBtnLoading = false
          if (this.screenWidth <= 768) {
            this.isShowDragVerify = false
          }
        })
      }, 10000);


      this.$set(this.tableData, indexs, row);
      var products=this.tableData[indexs]
      file(products, true)
          .then((res) => {
             var data1=res


            console.log(data1)
          })
          .catch(() => {
            this.loginBtnLoading = false
            if (this.screenWidth <= 768) {
              this.isShowDragVerify = false
            }
          })
      //模拟进度条
      // var obj= setInterval(() => {
      //     row.progress=row.progress+1
      //     this.tableData[indexs].progress=row.progress
      //     this.$set(this.tableData, indexs, row);
      //   }, 1500);
      //
      // setTimeout(() => {
      //    clearInterval(obj)
      //   row.down="下载完成"
      //   this.tableData[indexs].down="下载完成"
      //   this.$set(this.tableData, indexs, row);
      // }, 150000);
      // var item=document.getElementById("process")
      // item.style.display=""
    },
    //下载进度
    downprogress(row,indexs){
      row.progress=row.progress+1
      this.tableData[indexs].down=row.progress
      this.$set(this.tableData, indexs, row);
    },
    //时间格式化
    dateFormat(row, column){
      const daterc = row[column.property]
      if(daterc!=null){
        const dateMat= new Date(daterc);
        const year = dateMat.getFullYear();
        const month = dateMat.getMonth() + 1;
        const day = dateMat.getDate();
        const timeFormat= year + "/" + month + "/" + day;
        return timeFormat;
      }

    },
    rounding(row,column) {
      return parseFloat(row[column.property]).toFixed(2)
    },
    handleCurrentChange (val) {
      this.currentPage = val;
    }, //点击改变页数和数据
    handleSizeChange (val) {
      this.pagesize = val;
    }, //点击改变其他页数据
    submit() {
          this.loading=true
          region(this.form, true)
              .then((res) => {
                var data1=res
                var tables=[]
                for (var val in data1) {
                  var item=data1[val]
                  // var tableitem=[]
                  // tableitem["date"]=item["beginposition"]
                  // tableitem["name"]=item["filename"]
                  // tableitem["cloudcover"]=item["cloudcoverpercentage"]
                  // tableitem["size"]=item["size"]
                  item["progress"]=0
                  item["down"]="下载"
                  item["id"]=val
                  tables.push(item)
                }
                this.tableData=tables
                this.loading=false
              })
              .catch(() => {
                this.loginBtnLoading = false
                if (this.screenWidth <= 768) {
                  this.isShowDragVerify = false
                }
              })
        },
    alldown() {
      this.loading=true
      allfile(this.form, true)
          .then((res) => {
            var data1=res
            var tables=[]
            for (var val in data1) {
              var item=data1[val]
              // var tableitem=[]
              // tableitem["date"]=item["beginposition"]
              // tableitem["name"]=item["filename"]
              // tableitem["cloudcover"]=item["cloudcoverpercentage"]
              // tableitem["size"]=item["size"]
              item["progress"]=0
              item["down"]="正在下载"
              item["id"]=val
              tables.push(item)
            }
            this.tableData=tables
            this.loading=false
          })
          .catch(() => {
            this.loginBtnLoading = false
            if (this.screenWidth <= 768) {
              this.isShowDragVerify = false
            }
          })
    }
  },
}
</script>

<style lang="stylus" scoped>
.home-wrapper {
  margin-top: 20px;
  width: 100% !important;
  flex-direction column
}
</style>
